<template>
  <status-table
    ref="statusTableRef"
    v-model:tab="tabValue"
    v-model:page="page"
    v-model:size="size"
    v-model:select="selectValues"
    v-model:keyword="keywordValue"
    :loading="isLoading"
    :tableData="state.data"
    :status="status"
    :total="state.total"
    selectPlaceholder="角色"
    :selectOptions="selectOptions"
    @on-add="onAdd"
    @on-delete="onDelete"
    @on-edit="onEdit"
    :permission-add="userStore.access['user-add']"
    :permission-edit="userStore.access['user-edit']"
    :permission-delete="userStore.access['user-delete']"
  >
    <template #table-column>
      <el-table-column type="selection" />
      <el-table-column prop="username" label="用户名" sortable width="200">
        <template #default="{ row }">
          <div class="flex items-center">
            <div
              class="basis-12 shrink-0 h-12 mr-2 rounded-full"
              :style="{ background: `url(${row.avatar}) center / cover` }"
            ></div>
            <div class="w-0 flex flex-col flex-1">
              <el-text class="!self-start" truncated>{{ row.username }}</el-text>
              <el-text class="!self-start" type="info" truncated>{{ row.email }}</el-text>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="180" />
      <el-table-column prop="address" label="地址" width="300" />
      <el-table-column prop="roles" label="所属角色">
        <template #default="{ row }">
          {{ (row.roles as RoleItemResponseData[]).map((role) => role.name).join(',') }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <UserStatusTag :status="row.status" />
        </template>
      </el-table-column>
    </template>
  </status-table>
</template>

<script setup lang="ts">
import UserStatusTag from './components/UserStatusTag.vue'
import type { RoleItemResponseData } from '@/types/api'
import { useUserStore } from '@/stores'
import { userStatusList } from '@/services/user'

const userStore = useUserStore()

const {
  tabValue,
  page,
  size,
  selectValues,
  keywordValue,
  isLoading,
  selectOptions,
  state,
  status,
  onAdd,
  onDelete,
  onEdit
} = userStatusList()
</script>

<style scoped lang="scss"></style>
